<template>
	<view class="wrap">
		<view class="wrap-content align-center-flex-column">
			<image style="width: 266rpx;height: 232rpx;" src="/static/images/logo.png" mode="widthFix">
			</image>
			<text class="wrap-content-title"># 安全、真实、以结婚为目的的交友平台 #</text>
		</view>
		<view class="wrap-file">
			<up-checkbox shape="circle" size="20rpx" activeColor="#FF47AB" label="同意用户协议与隐私条款" name="agree" usedAlone
				v-model:checked="aloneChecked">
				<template #label>
					<view class="wrap-file-label">
						我已阅读并同意<text style="color: #ED138B;">《缘梦隐私协议》</text><text
							style="color: #ED138B;">《软件许可及用户服务协</text>
					</view>
					<view class="wrap-file-label">
						<text style="color: #ED138B;">议》</text>和<text style="color: #ED138B;">《与第三方共享个人信息》</text>
					</view>
				</template>
			</up-checkbox>
		</view>
		<view class="wrap-btn align-justify-center" @click="handleLogin">
			微信快速登录
		</view>
		<up-toast ref="uToastRef"></up-toast>
	</view>
</template>

<script setup>
	import {
		getCodeImg
	} from '@/api/login'
	import {
		useConfigStore,
		useUserStore
	} from '@/store'
	import {
		ref,
		getCurrentInstance
	} from "vue"
	import { toast, showConfirm, tansParams } from '@/utils/common'

	const {
		proxy
	} = getCurrentInstance()
	const globalConfig = useConfigStore().config
	const codeUrl = ref("")
	// 验证码开关
	const captchaEnabled = ref(true)
	// 用户注册开关
	const register = ref(false)
	const loginForm = ref({
		"userName": "jzs"
	})

	const aloneChecked = ref(false)

	// 用户注册
	function handleUserRegister() {
		proxy.$tab.redirectTo(`/pages/register`)
	}

	// 隐私协议
	function handlePrivacy() {
		let site = globalConfig.appInfo.agreements[0]
		proxy.$tab.navigateTo(`/pages/common/webview/index?title=${site.title}&url=${site.url}`)
	}

	// 用户协议
	function handleUserAgrement() {
		let site = globalConfig.appInfo.agreements[1]
		proxy.$tab.navigateTo(`/pages/common/webview/index?title=${site.title}&url=${site.url}`)
	}

	// 获取图形验证码
	function getCode() {
		// getCodeImg().then(res => {
		//   captchaEnabled.value = res.captchaEnabled === undefined ? true : res.captchaEnabled
		//     if (captchaEnabled.value) {
		//       codeUrl.value = 'data:image/gif;base64,' + res.img
		//       loginForm.value.uuid = res.uuid
		//     }
		// })
	}

	// 登录方法
	const handleLogin = () => {
		if(!aloneChecked.value){
			toast('请先仔细阅读服务条款，并勾选同意后才能登陆')
			return
		}
		proxy.$modal.loading("登录中，请耐心等待...")
		pwdLogin()
	}

	// 密码登录
	async function pwdLogin() {
		useUserStore().login(loginForm.value).then(() => {
			proxy.$tab.reLaunch('/pages/index')
		})
	}

	// 登录成功后，处理函数
	function loginSuccess(result) {
		// 设置用户信息
		// useUserStore().getInfo().then(res => {
		//   proxy.$tab.reLaunch('/pages/index')
		// })
	}

	getCode()
</script>

<style lang="scss" scoped>
	.wrap {
		padding: 350rpx 60rpx 0 60rpx;
		box-sizing: border-box;

		&-content {
			&-title {
				margin-top: 20rpx;
				font-size: 22rpx;
				color: #FF45AB;
			}
		}

		&-file {
			margin: 400rpx 0 40rpx;

			&-label {
				display: flex;
				// justify-content: flex-start;
				flex-wrap: wrap;
				font-size: 22rpx;
				color: #444444;
			}
		}

		&-btn {
			width: 100%;
			height: 96rpx;
			background-color: #FF47AB;
			border-radius: 200rpx 200rpx 200rpx 200rpx;
			font-size: 30rpx;
			color: #FFFFFF;
		}
	}
</style>